import React, { useRef } from 'react';
import { useHistory } from 'react-router-dom';
import { Form, Space, Button } from 'antd';
import { SyncOutlined } from '@ant-design/icons';
import { CmdbContent, CmdbHeader, Authorized } from '@/components';
import permission from '@/config/permission';
import AcceptanceListQuery from './AcceptanceListQuery';
import AcceptanceList from './AcceptanceList';
import OperationLogModal from './OperationLogModal';

/**
 * 验收资料管理
 */
function ResourceAcceptance() {
    const history = useHistory();

    const acceptanceListRef = useRef();
    const operationLogModalRef = useRef();

    const [form] = Form.useForm();

    return (
        <CmdbContent>
            <CmdbHeader title="验收资料管理" />
            <div className="back-white padding-10">
                <div className="padding-10">
                    <AcceptanceListQuery
                        form={form}
                        onQuery={() => {
                            acceptanceListRef.current.search.submit();
                        }}
                    />
                </div>
                <div className="padding-10">
                    <Space>
                        <Authorized authority={permission.resourceAcceptance_create} noMatch={null}>
                            <Button
                                type="primary"
                                onClick={() => {
                                    history.push('/resource/acceptance/create');
                                }}
                            >
                                新增
                            </Button>
                        </Authorized>
                        <Authorized authority={permission.resourceAcceptance_viewOperationLog} noMatch={null}>
                            <Button
                                onClick={() => {
                                    operationLogModalRef.current.open();
                                }}
                            >
                                操作日志
                            </Button>
                        </Authorized>
                        <Button
                            icon={<SyncOutlined />}
                            onClick={() => {
                                acceptanceListRef.current.refresh();
                            }}
                        />
                    </Space>
                </div>
                <div className="padding-10">
                    <AcceptanceList ref={acceptanceListRef} form={form} />
                </div>
            </div>
            <OperationLogModal ref={operationLogModalRef} />
        </CmdbContent>
    );
}

export default ResourceAcceptance;
